<template>
  <div
    :class="{
      articleDetail: true,
      [$store.getters.isDay ? 'day' : 'night']: true,
    }"
  >
    <Header></Header>
    <div class="container">
      <div class="HeaderBaci">
        <vue-typed-js
          class="text"
          :strings="txt"
          :loop="true"
          :startDelay="300"
          :typeSpeed="100"
          :backSpeed="50"
          v-show="isShow"
        >
          <span class="typing"></span>
        </vue-typed-js>
      </div>
      <div class="article">
        <div class="title">
          <span>{{ article.title }}</span>
        </div>
        <div class="art-header">
          <div class="info">
            <div class="author">
              <i class="iconfont icon-user"></i>
              <span>{{ article.create_user }}</span>
            </div>
            <div class="time">
              <i class="iconfont icon-time"></i>
              <span>{{ article.create_time }}</span>
            </div>
            <div class="art-look">
              <i class="iconfont icon-liulanliang"></i>
              <span>{{ article.look_number }}</span>
            </div>
          </div>

          <div class="type">
            <div class="class">
              <i class="iconfont icon-fenlei"></i>
              <span>{{ article.class_name }}</span>
            </div>
            <div class="tags">
              <i class="iconfont icon-tags"></i>
              <span
                v-for="(item, index) in article.tags"
                :key="index"
                class="tag"
                >{{ item }}</span
              >
            </div>
          </div>
        </div>
        <div class="posts" v-html="article.body_html"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
export default {
  name: "articleDetail",
  data() {
    return {
      isShow: true,
      screenWidth: null,
      txt: [
        "纠正一个错误的方法有很多，",
        "而解决一个错误的终极方法，就是不给它发生的机会。",
      ],
      id: "",
      article: {},
    };
  },
  components: {
    Header,
  },
  created() {
    window.scrollTo(0, 0);
    this.$axios
      .get('/api/article/getOne/',{
        params:{
          _id:this.$route.params.id
        }
      })
      .then((res) => {
        // console.log(res);
        this.article = res.data.data;
        let time = this.article.create_time;
        this.article.create_time = this.$dayjs(time).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        console.log(this.article);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        this.screenWidth = document.body.clientWidth;
        window.onresize = () => {
          //屏幕尺寸变化就重新赋值
          return (() => {
            this.screenWidth = document.body.clientWidth;
          })();
        };
        if (val < 750) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import url(../../assets/css/article-detail.css);
.articleDetail {
  .container {
    width: 100%;
    min-height: 100vh;
    background-color: #339999;
    background-image: linear-gradient(
        90deg,
        rgba(22, 122, 65, 0.329) 5%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(22, 122, 65, 0.325) 5%, transparent 0);
    background-size: 35px 35px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    .HeaderBaci {
      width: 100%;
      height: 200px;
      background-image: url("../../assets/image/ArticleBaci2.jpeg");
      background-size: cover;
      position: relative;
      background-color: #339999;
      .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        font-weight: 600;
        color: #fff;
        filter: drop-shadow(10px 10px 15px rgba(223, 221, 12, 0.5));
      }
    }
    .article {
      width: 95%;
      background-color: #fff;
      margin: 10px auto 25px;
      padding: 15px 50px 10px;
      border-radius: 20px;
      height: 100%;
      transition: all 0.5s ease-in-out;
      box-sizing: border-box;
      .title {
        width: 100%;
        font-size: 53px;
        font-weight: 600;
        color: #000;
        margin: 5px 15px;
      }
      .art-header {
        width: 100%;
        .info {
          display: flex;
          font-size: 15px;
          // justify-content: left;
          div {
            margin: 5px 15px;
          }
        }
        .type {
          display: flex;
          font-size: 15px;
          div {
            margin: 5px 15px;
          }
          .tags {
            .tag {
              // background-color: skyblue;
              margin: 5px;
              color: #fff;
              padding: 4px;
              font-size: 13px;
              border-radius: 5px;
            }
            .tag:nth-child(2) {
              background-color: skyblue;
            }
            .tag:nth-child(3) {
              background-color: rgba(8, 164, 8, 0.868);
            }
            .tag:nth-child(4) {
              background-color: orange;
            }
          }
        }
      }
      .posts {
        margin-top: 20px;
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .article {
    padding: 15px 10px !important;
    
  }
  
  .posts {
    width: 100%;
  }
}
</style>